 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">新建消息</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="">
          <Form-item label="消息标题" prop="newtitle">
            <i-input v-model="formValidate.newtitle" size="large" placeholder="输入消息标题"></i-input>
          </Form-item>
          <Form-item label="消息内容" prop="newcontent">
            <editor ref="editor" v-model="formValidate.newcontent" @on-change="handleChange"/>
          </Form-item>
          <Form-item>
            <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </Form-item>
        </i-form>
        <!-- <div class="form-item">
          <Row>
            <i-col span="4" class="item-name text-right">
              消息标题
            </i-col>
            <i-col span="19">
              <i-input :value.sync="value" placeholder="请输入消息标题" size="large"></i-input>
            </i-col>
          </Row>
          <Row style="padding-top: 15px;">
            <i-col span="4" class="item-name text-right">
              消息内容
            </i-col>
            <i-col span="19">
              <editor ref="editor" :value="contents" @on-change="handleChange"/>
              <Button @click="changeContent">修改编辑器内容</Button>
            </i-col>
          </Row>
        </div> -->
        <!-- <div class="ban-btn">
          <i-button class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </div> -->
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 import Editor from '_c/editor';
 export default {
   name: 'news-add',
   components: {
     Editor
   },
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       contents: '',
       formValidate:{
         newtitle: '',
         newcontent: ''
       },
       ruleValidate:{
         newtitle:[
           {
             required: true,
             message: '输入消息标题',
             trigger: 'blur'
           }
         ],
         newcontent:[
           {
             required: true,
             message: '输入消息内容',
             trigger: 'blur'
           }
         ]
        }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'news_management'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     },
     bind(){
       // 模拟ajax读取数据绑定
       this.ruleValidate.newcontent = 'hello word'
       this.$refs.editor.setHtml(this.ruleValidate.newcontent) // 加上这句才可以
     },
     //富文本
     handleChange (html, text) {
       console.log(html, text)
     }
     // changeContent () {
     //   this.$refs.editor.setHtml('<p>powered by wangeditor</p>')
     // }
   },
   mounted() {
     this.bind()
   }
 };
 </script>
 <style lang="less">
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 65px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-input{
       border-radius: 0 2px 2px 0;
     }
     .content-con{
       margin: 15px 15px 0px 15px;
       .form-item{
         .item-name{
           padding: 8px 15px;
           height: 36px;
           line-height: 20px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           -webkit-box-sizing: border-box;
           box-sizing: border-box;
         }
         .text-right{
           text-align: right;
         }
        }
        .ban-btn{
          padding:18px 0px 12px 110px;
          .save{
            background-color: rgb(0, 150, 136);
            color: white;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            margin-right: 15px;
          }
        }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
